<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>下单</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	
<div id="doumee">

	<header class="header">
		<a class="left_icon back_btn"></a>
		<h4 class="title">下单</h4>
		<a class="right_icon sel_icon" @click="openMask"></a>
	</header>
	
	<div class="swiper-container Main" id="Main">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="children" id="menuMod">
					<!--搜索模块-->
					<ol class="searchMod">
						<li class="search-box flex-row">
							<input class="flex-full" type="text" placeholder="请输入客户名、手机号、地址" v-model.trim="search" />
							<button class="btn" type="button" @click="seachOperate"></button>
						</li>
						<li class="res h6 flex-row" v-if="searchRes != null">
							<div class="result flex-full">{{searchRes}}</div>
							<a class="btn" @click="empty">清空</a>
						</li>
					</ol>
					<!--搜索模块 end-->
					
					<!--列表-->
					<div class="menu-list">
						<!--有数据-->
						<ul class="box bg-w" v-for="(item,index) in menuData" v-if="menuData.length > 0" @click="skip(item.id)">
							<li class="t1">{{item.name}}&nbsp;&nbsp;{{item.phone}}&nbsp;&nbsp;&nbsp;&nbsp;
								<span class="color-1" v-if="item.type == 0">意向</span><!--意向(待办\客户)-->
								<span class="color-2" v-if="item.type == 1">预订</span><!--预订（待办、客户、他人跟进）-->
								<span class="color-3" v-if="item.type == 2">意向</span><!--意向（初测）（待办、客户、他人跟进）-->
								<span class="color-3" v-if="item.type == 3">预订</span><!--预订（初测）（客户、他人跟进）-->
								<span class="color-4" v-if="item.type == 4">预订</span><!--预订（复测）（他人跟进、客户）-->
								<span class="color-5" v-if="item.type == 5">已签单</span><!--已签单（客户）-->
								<span class="color-6" v-if="item.type == 6">已下单</span><!--已下单（客户）-->
								<span class="color-7" v-if="item.type == 7">已安装</span><!--已安装（客户）-->
								<span class="color-8" v-if="item.type == 8">新客户</span><!--新客户（待办）-->
								<span class="color-9" v-if="item.type == 9">待下单</span><!--待下单（待办）-->
								<span class="color-10" v-if="item.type == 10">待签单</span><!--待签单（待办）-->
								<span class="color-11" v-if="item.type == 11">初测预约</span><!--初测预约（待办、我的测量）-->
								<span class="color-12" v-if="item.type == 12">初测预约确认</span><!--初测预约确认（待办、我的测量）-->
								<span class="color-13" v-if="item.type == 13">初测确认</span><!--初测确认（待办、我的测量）-->
								<span class="color-14" v-if="item.type == 14">复测预约</span><!--复测预约（待办、我的测量）-->
								<span class="color-15" v-if="item.type == 15">复测确认</span><!--复测确认（待办、我的测量）-->
								<span class="color-16" v-if="item.type == 16">复测预约确认</span><!--复测预约确认（待办、我的测量）-->
								<span class="color-17" v-if="item.type == 17">派单</span><!--派单-->
								<span class="color-18" v-if="item.type == 18">业务员待分配</span><!--派业务员待分配-->
								<span class="color-19" v-if="item.type == 19">已生产</span><!--已生产-->
								<span class="color-20" v-if="item.type == 20">已发货</span><!--已发货-->
								<span class="color-21" v-if="item.type == 21">已受理</span><!--已受理-->
								<span class="color-22" v-if="item.type == 22">已包装</span><!--已包装-->
								<span class="color-23" v-if="item.type == 23">售后已受理</span><!--售后已受理-->
								<span class="color-24" v-if="item.type == 24">已排单</span><!--已排单-->
								<span class="color-25" v-if="item.type == 25">已完工</span><!--已完工-->
								<span class="color-26" v-if="item.type == 26">已回访</span><!--已回访-->
							</li>
							<li class="t2">{{item.addr}}</li>
							<li class="t2">{{brand[item.brand]}}</li>
							<li class="t2">下单时间：{{item.time}}</li>
						</ul>
						
						<!--无数据-->
						<div class="nullMod" v-if="menuData.length == 0 || !menuData">暂无数据</div>
						
					</div>
					<!--列表 end-->
					
				</div>
				
			</div>
		</div>
	</div>
	
	<!--筛选-->
	<div class="subMain animate" id="selectMask">
		<header class="header">
			<a class="left_icon back_btn" data-type='1'></a>
			<h4 class="title">筛选</h4>
		</header>
		<div class="swiper-container Main" id="selectMod">
			<div class="swiper-wrapper">
				<div class="swiper-slide content">
					<div class="children">
					
						<div class="dm-norlist bg-w dm-mt top-line bottom-line">
							<ul class="input bottom-line flex-row">
								<li class="name">下单时间</li>
								<li class="cot tr flex-full date-slot">
									<label class="tc"><input type="date" @change="selStart" />{{selectRes.start ? selectRes.start : '开始时间'}}</label>
									<span> - </span>
									<label class="tc"><input type="date" @change="selEnd" />{{selectRes.end ? selectRes.end : '结束时间'}}</label>
								</li>
							</ul>
							<ul class="list arrow flex-row" @click="selBrand">
								<li class="name">订单产品</li>
								<li class="cot flex-full tr">{{selectRes.brand == '' ? '请选择' : brand[selectRes.brand]}}</li>
							</ul>
						</div>
						
						<button class="submitBtn" type="button" @click="submit">确定</button>
					
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--筛选 end-->

</div>

<script type="text/javascript">

var vm = new Vue({
	el:"#doumee",
	data:{
		search:null,
		selectRes:{
			start:'',
			end:'',
			brand:''
		},
		brand:['志邦橱柜','法兰菲全屋','志邦木门'],
		menuData:[
			{id:101,name:'张三',phone:'18756194512',addr:'和塘路小区1栋1单元202室',brand:1,time:'2018.11.01 11:00:00',type:3},
			{id:102,name:'张三',phone:'18756194512',addr:'和塘路小区1栋1单元202室',brand:2,time:'2018.11.01 11:00:00',type:2},
			{id:103,name:'张三',phone:'18756194512',addr:'和塘路小区1栋1单元202室',brand:0,time:'2018.11.01 11:00:00',type:1},
			{id:104,name:'张三',phone:'18756194512',addr:'和塘路小区1栋1单元202室',brand:1,time:'2018.11.01 11:00:00',type:0},
			{id:105,name:'张三',phone:'18756194512',addr:'和塘路小区1栋1单元202室',brand:1,time:'2018.11.01 11:00:00',type:3},
			{id:106,name:'张三',phone:'18756194512',addr:'和塘路小区1栋1单元202室',brand:2,time:'2018.11.01 11:00:00',type:2},
			{id:107,name:'张三',phone:'18756194512',addr:'和塘路小区1栋1单元202室',brand:0,time:'2018.11.01 11:00:00',type:1},
			{id:108,name:'张三',phone:'18756194512',addr:'和塘路小区1栋1单元202室',brand:1,time:'2018.11.01 11:00:00',type:0},
			{id:109,name:'张三',phone:'18756194512',addr:'和塘路小区1栋1单元202室',brand:1,time:'2018.11.01 11:00:00',type:0},
			{id:110,name:'张三',phone:'18756194512',addr:'和塘路小区1栋1单元202室',brand:1,time:'2018.11.01 11:00:00',type:0}
		],
	},
	methods:{
		//清空
		empty:function(){
			this.selectRes = {
				start:'',
				end:'',
				brand:''
			};
		},
		//搜索
		seachOperate:function(){
			var that = this;
			if(that.search){
				$.ajax({
					url:'',
					data:{
						search:that.search
					},
					success:function(res){
						//that.menuData = res;
					},
				});
			};
		},
		//刷新数据
		menuRefresh:function(pull){
			pull.innerHTML = '刷新完成';
			
		},
		//加载数据
		menuReload:function(pull){
			var that = this;
			
			if(pull){
				pull.innerHTML = '已加载全部数据';
			};
			$.ajax({
				url:'',
				data:{},
				success:function(res){
					//that.menuData = res;
				},
			});
		},
		//打开筛选
		openMask:function(){
			openSubMain('#selectMask');
		},
		//选择品牌
		selBrand:function(){
			var that = this;
			dmSelect(that.brand,function(index){
				that.selectRes.brand = index;
			});
		},
		//选择开始时间
		selStart:function(e){
			var val = e.currentTarget.value.split('-').join('.');
			this.selectRes.start = val;
		},
		//选择结束时间
		selEnd:function(e){
			var val = e.currentTarget.value.split('-').join('.');
			this.selectRes.end = val;
		},
		//确定
		submit:function(){
			var target = $('#selectMask');
			closeSubMain(target);
		},
		//进入详情
		skip:function(id){
			location.href = 'menuDtl.html?id='+id;
		}
	},
	mounted:function(){
		var that = this;
		pullSwiper('#Main',{
			up:that.menuRefresh,
			down:that.menuReload
		});
		pullSwiper('#selectMod')
	},
	computed:{
		//筛选结果
		searchRes:function(){
			if( this.selectRes.brand != '' || this.selectRes.start != '' || this.selectRes.end != ''){
				if(this.selectRes.brand == ''){
					return this.selectRes.start+'-'+this.selectRes.end;
				}else{
					return this.brand[this.selectRes.brand]+' '+this.selectRes.start+'-'+this.selectRes.end;	
				};
			}else{
				return null;
			};
		},
	},
});

</script>

</body>
</html>
